<template>
  <div>
    <h3>供应商基本资料</h3>
    <hr class="lsz-hr" />
    <Newtable v-bind:tableData="tableData" @fatherMethod="fatherMethod" @fatherMethod2="fatherMethod2" ref="Newtable"/>
    <Newtable2 ref="Newtable2" />
    <el-table :data="tableData" stripe style="width: 100%" id="lsz-forminput">
      <el-table-column
        type="index"
        label="编号："
        width="180"
      ></el-table-column>
      <el-table-column prop="name" label="供应商名称：" width="180">
      </el-table-column>
      <el-table-column prop="coding" label="供应商编码："> </el-table-column>
      <el-table-column prop="phone" label="联系电话："> </el-table-column>
      <el-table-column prop="contact" label="联系人："> </el-table-column>
      <el-table-column prop="address" label="地址："> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="bianji(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="open(scope.row)"
          
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页组件 -->
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage2"
      :page-sizes="[7, 20, 100]"
      :page_size="7"
      ref="lszpa"
      layout="sizes, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
  </div>
</template>
<script>
import { lszgon } from '../http/api'
import Newtable from '../components/provider/Newtable.vue'
import Newtable2 from '../components/provider/Newtable2.vue'
export default {
  data() {
    return {
      list: {},
      tableData: [],
      currentPage2: 1,
      total:0,
      pagesi:7
      
    }
  },
  components: {
    Newtable,
    Newtable2,
  },
  methods: {
    open(val) {
      this.$confirm('此操作将永久删除该供应商, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let data = new URLSearchParams()
          data.append('id', val.id)
          this.$axios
            .post('/supply/delete', data, {
              headers: {
                Accept: '*/*',
                'Content-Type': 'application/x-www-form-urlencoded',
              },
            })
            .then((res) => {
              console.log(res)
              let a=this.$refs.lszpa.$attrs.page_size
              this.handleSizeChange(a);
            })
            .catch((err) => {
              console.log(err)
            })
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    inputcheck(event) {
      if (!event.currentTarget.value) {
        console.log(1)
      }
    },
    bianji(val) {
      this.list = val
      console.log(this.list)
      this.$refs.Newtable2.ruleForm = this.list
      let i = this.$refs.Newtable2.diaVisible
      this.$refs.Newtable2.diaVisible = !i
    },
    setdate() {
      lszgon()
        .then((res) => {
          
          this.total=res.data.value.data.length
          console.log('total是',typeof(this.total))
        })
        .catch((err) => {
          console.log(err)
        })
    },
    fatherMethod(){
      let a=this.$refs.lszpa.$attrs.page_size
     this.handleSizeChange(a);
    },
    fatherMethod2(){
      let a=this.$refs.lszpa.$attrs.page_size
      this.pagesi=a
    },
    
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        console.log(this.currentPage2);
        let b=this.$refs.Newtable.shousuo
        let data=new Object()
        data.name=b
        data.page=this.currentPage2
        data.size=val
        this.$axios.post('/supply/selectLikeNamePage',data)
        .then(res=>{
          this.tableData=res.data.data
        })
        .catch(err=>{
          console.log(err)
        })
      },
      handleCurrentChange(val) {
       let a=this.$refs.lszpa.$attrs.page_size
       let b=this.$refs.Newtable.shousuo
        let data=new Object()
        data.name=b
        data.page=val
        data.size=a
        this.$axios.post('/supply/selectLikeNamePage',data)
        .then(res=>{
          this.tableData=res.data.data
          console.log(res)
        })
        .catch(err=>{
          console.log(err)
        })
      }
  },
  mounted() {
    this.setdate()
   let a=this.$refs.lszpa.$attrs.page_size
     this.handleSizeChange(a);
  },
}
</script>
<style>
#el-shousuo {
  display: inline;
  width: 300px;
  margin-left: 62%;
}
#lsz-frominput {
  margin-top: 10%;
}
.lsz-hr {
  margin-bottom: 2%;
}
</style>

